<template>
  <fragment>
      <div class="addr-slts">
       <el-select v-model="addressInfo.province.code"  clearable placeholder="省份" @change="changeProvinces" style="width:150px;">
            <el-option
            v-for="item in selectOptions.provinces"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="addressInfo.city.code" :disabled="selectOptions.disableCitys" clearable placeholder="地市" @change="changeCitys" style="width:150px;margin-left:5px;">
            <el-option
            v-for="item in selectOptions.citys"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="addressInfo.district.code" :disabled="selectOptions.disableDistricts" clearable placeholder="区县" @change="changeDistricts" style="width:150px;margin-left:5px;">
            <el-option
            v-for="item in selectOptions.districts"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </div>
      <div class="addr-details">
          <el-input type="text"  placeholder="详细地址..."  v-model="addressInfo.details" @change="detailsChange($event)"  maxlength="200"  show-word-limit></el-input>
      </div>
  </fragment>
</template>

<script>
import * as addressApi from '@/api/address'

export default {
    name:'BxAddress',
    props:{
        /**通过对象引用的方式，组件内组件外同步修改 */
        addressInfo:{
            type:Object,
            default:null,
            /*default:{
                province:{name:'',code:''},
                city:{name:'',code:''},
                district:{name:'',code:''},
                details:'',
                merge:'', //合并一起的地址
                isvalid:false //效验
            }*/
        },

    },
    data(){
        return {
            address:{
                provinces:[], //省份
                citys:[],//地级市
                districts:[],//区县
            },
            selectOptions:{
                provinces:[], //省份
                disableCitys:true,
                citys:[],//地级市
                disableDistricts:true,
                districts:[],//区县
            }
        }
    },
    created(){
        var that=this;
        if(!that.addressInfo){
            throw new Error('请指定地址组件参数addressInfo')
        }
        addressApi.getProvinces().then(res=>{
            if(res.data){
                that.address.provinces=[...res.data];
                that.selectOptions.provinces=[...res.data.map(item=>{
                    return{ label:item.name,value:item.code};
                })]
            }
        });
    },
    methods:{
        changeProvinces($event){
            var that=this;
            disablecitys();
            var province=that.address.provinces.filter(item=>item.code==that.addressInfo.province.code);
            if(province.length>0){
            that.addressInfo.province.name=province[0].name;
            }
            var citys=that.address.citys.filter(item=>item.provinceCode==that.addressInfo.province.code);
            if(citys.length>0){
                that.selectOptions.citys=[...citys.map(item=>{
                    return {label:item.name,value:item.code};
                })];
                enablecitys();
            }else{
                addressApi.getCitys({provinceCode:that.addressInfo.province.code}).then(res=>{
                    if(res.data){
                        that.address.citys.push(...res.data);
                        that.selectOptions.citys=[...res.data.map(item=>{
                            return {label:item.name,value:item.code};
                        })];
                    }
                    enablecitys();
                })
            }
            that.mergeAddress();

            function disablecitys(){
                that.selectOptions.disableCitys=true;
                that.selectOptions.citys=[];
                that.addressInfo.city.code='';
                that.selectOptions.disableDistricts=true;
                that.selectOptions.districts=[];
                that.addressInfo.district.code='';
            }

            function enablecitys(){
                that.selectOptions.disableCitys=false;
                that.addressInfo.district.code='';
            }
        },
        changeCitys($event){
            var that=this;
            disabledistricts();
            var city=that.address.citys.filter(item=>item.code==that.addressInfo.city.code);
            if(city.length>0){
            that.addressInfo.city.name=city[0].name;
            }
            var districts=that.address.districts.filter(item=>item.cityCode==that.addressInfo.city.code);
            if(districts.length>0){
                that.selectOptions.districts=[...districts.map(item=>{
                    return {label:item.name,value:item.code};
                })];
                enabledistricts();
            }else{
                addressApi.getDistricts({cityCode:that.addressInfo.city.code}).then(res=>{
                    if(res.data){
                        that.address.districts.push(...res.data);
                        that.selectOptions.districts=[...res.data.map(item=>{
                            return {label:item.name,value:item.code};
                        })];
                    }
                    enabledistricts();
                })
            }
            that.mergeAddress();

            function disabledistricts(){
                that.selectOptions.disableDistricts=true;
                that.selectOptions.districts=[];
            }

            function enabledistricts(){
                that.selectOptions.disableDistricts=false;
            }
        },
        changeDistricts($event){
            var that=this;
            var fobj=that.address.districts.filter(item=>item.code==that.addressInfo.district.code);
            // if(fobj.length!=0){
            //     that.shop.districtId=fobj[0].id;
            // }
            var district=that.address.districts.filter(item=>item.code==that.addressInfo.district.code);
                if(district.length>0){
                that.addressInfo.district.name=district[0].name;
            }
            that.mergeAddress();
        },
        detailsChange($event){
            this.mergeAddress();
        },
        mergeAddress(){
            var that=this;
            that.addressInfo.merge=
                that.addressInfo.province.name+
                that.addressInfo.city.name+
                that.addressInfo.district.name+
                that.addressInfo.details.trim();
            that.addressInfo.isvalid= 
                that.addressInfo.province.name && 
                that.addressInfo.city.name &&
                that.addressInfo.district.name &&
                that.addressInfo.details.trim()
            
        }
    }
}
</script>

<style scoped>
    .addr-slts, .addr-details{
        padding:5px 0px;
    }
</style>